<template>
    <view class="page-content">
        <sub-navbar title="微信登录"></sub-navbar>
        <view class="main-view"> 
            <view class="wx-avatar">
                <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
                    <up-image :src="avatar" width="120px" height="120px" shape="circle"></up-image>
                    <text v-if="!avatar">授权头像</text>
                </button>
            </view>
            <view class="nameContent">
                <text>昵称:</text>
                <view class="right-name">
                    <input name="nickName" type="nickname" placeholder="请填写昵称" v-model="nickName" @blur="bindblur" @input="bindinput"/>
                </view>
            </view>
            <view class="agree-view">
                <view>
                    <up-checkbox name="agree" usedAlone v-model:checked="aloneChecked"></up-checkbox>
                </view>
                <text>同意用户协议与隐私条款</text>
            </view>
            <view class="loginBtn" v-if="islogin">
                <button class="btn" form-type="submit" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">手机号一键登录</button>
            </view>
            <view class="loginBtn" v-else>
                <view class="btn-no" @click="handleCheck">手机号一键登录</view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { userAppInfo } from '@/store/modules/user';
const store = userAppInfo();
const { baseChange } = store;

const avatar = ref<any>('');
const nickName = ref<string>('');
const aloneChecked = ref<boolean>(false);
const islogin = ref<boolean>(false)

watch(
    () => avatar.value,
    (newVal) => {
        if(newVal && nickName.value && aloneChecked.value) {
            islogin.value = true;
        } else {
            islogin.value = false;
        }
    }
)

watch(
    () => nickName.value,
    (newVal) => {
        if(newVal && avatar.value && aloneChecked.value) {
            islogin.value = true;
        } else {
            islogin.value = false;
        }
    }
)

watch(
    () => aloneChecked.value,
    (newVal) => {
        if(newVal && avatar.value && nickName.value) {
            islogin.value = true;
        } else {
            islogin.value = false;
        }
    }
)

// 获取微信 头像
const onChooseAvatar = (e: any) => {
    let { avatarUrl } = e.detail;
    avatar.value = avatarUrl
}

// 获取微信 昵称
const bindblur = (e: any) => {
    nickName.value = e.detail.value;
}
// 获取微信 昵称
const bindinput = (e: any) => {
    nickName.value = e.detail.value;
}
// 校验
const handleCheck = () => {
    if(!avatar.value) {
        uni.showToast({
            icon: 'none',
            title: "请选择头像！"
        });
        return
    }
    if(!nickName.value) {
        uni.showToast({
            icon: 'none',
            title: "请填写昵称！"
        });
        return
    }
    if(!aloneChecked.value) {
        uni.showToast({
            icon: 'none',
            title: "请勾选相关协议！"
        });
        return
    }
}

// 微信一键登录
const getPhoneNumber = (e: any) => {
    console.log("登录", e)
    const info = {
        token: '075f807fc17448cca16fe0b9f8cd142',
        nickName: nickName.value,
        avatar: avatar.value,
        mobile:  '',
    }
    baseChange(info);
    uni.switchTab({
        url: "/pages/home/index"
    })
}

</script>

<style lang="scss" scoped>
.main-view{
    flex: 1;
    padding: 0 25rpx;
    .wx-avatar{
        padding: 100rpx 0;
        display: flex;
        justify-content: center;
        align-items: center;
        .avatar-wrapper{
            padding: 0;
            background-color: transparent;
            font-size: 28rpx;
            color: $uni-text-color;
            &::after{
                border: none !important;
            }
        }
    }
    .nameContent{
        display: flex;
        margin: 25rpx;
        padding: 25rpx 0;
        align-items: center;
        border-bottom: 1rpx solid $uni-border-color;
        font-size: 28rpx;
        .right-name{
            margin-left: 25rpx;
            flex: 1;
        }
    }
    .agree-view{
        padding: 0 25rpx;
        display: flex;
        align-items: center;
        font-size: 26rpx;
        color: #909399;
        margin-bottom: 100rpx;
    }
    .loginBtn{
        padding: 25rpx;
        .btn{
            width: 100%;
            height: 90rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #2979ff;
            color: #FFFFFF;
            font-size: 32rpx;
            border-radius: 50rpx;
        }
        .btn-no{
            width: 100%;
            height: 90rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #2979ff;
            color: #FFFFFF;
            font-size: 32rpx;
            border-radius: 50rpx;
        }
    }
}
</style>